<template>
	<div class="home-product">
		<HomePanel :title="g.name" v-for="g in goodsProduct" :key="g.id">
			<template #main>
				<div class="box">
					<RouterLink class="cover" :to="`/goods-detail/${g.id}`">
						<img v-img-lazy="g.picture" />
						<strong class="label">
							<span>{{ g.name }}馆</span>
							<span>{{ g.saleInfo }}</span>
						</strong>
					</RouterLink>

					<ul class="goods-list">
						<li v-for="item in g.goods" :key="item.id">
							<HomeGoodsItem :goods="item" :id="item.id"></HomeGoodsItem>
						</li>
					</ul>
				</div>
			</template>
		</HomePanel>
	</div>
</template>

<script>
	export default {
		name: 'HomeProduct',
	}
</script>

<script setup>
	import { ref, onMounted } from 'vue'
	import HomePanel from './HomePanel.vue'
	import { reqHomeGoodsData } from '@/apis/home'
	import HomeGoodsItem from './HomeGoodsItem.vue'

	const goodsProduct = ref([])

	async function getHomeGoodsData() {
		try {
			const res = await reqHomeGoodsData()
			goodsProduct.value = res.result
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.error,
			})
		}
	}

	onMounted(() => {
		getHomeGoodsData()
	})
</script>

<style scoped lang="scss">
	.home-product {
		background: #fff;
		margin-top: 20px;
		.sub {
			margin-bottom: 2px;

			a {
				padding: 2px 12px;
				font-size: 16px;
				border-radius: 4px;

				&:hover {
					background: $xtxColor;
					color: #fff;
				}

				&:last-child {
					margin-right: 80px;
				}
			}
		}

		.box {
			display: flex;

			.cover {
				width: 240px;
				height: 610px;
				margin-right: 10px;
				position: relative;

				img {
					width: 100%;
					height: 100%;
				}

				.label {
					width: 188px;
					height: 66px;
					display: flex;
					font-size: 18px;
					color: #fff;
					line-height: 66px;
					font-weight: normal;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate3d(0, -50%, 0);

					span {
						text-align: center;

						&:first-child {
							width: 76px;
							background: rgba(0, 0, 0, 0.9);
						}

						&:last-child {
							flex: 1;
							background: rgba(0, 0, 0, 0.7);
						}
					}
				}
			}

			.goods-list {
				width: 990px;
				display: flex;
				flex-wrap: wrap;

				li {
					width: 240px;
					height: 300px;
					margin-right: 10px;
					margin-bottom: 10px;

					&:nth-last-child(-n + 4) {
						margin-bottom: 0;
					}

					&:nth-child(4n) {
						margin-right: 0;
					}
				}
			}

			.goods-item {
				display: block;
				width: 220px;
				padding: 20px 30px;
				text-align: center;
				transition: all 0.5s;

				&:hover {
					transform: translate3d(0, -3px, 0);
					box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
				}

				img {
					width: 160px;
					height: 160px;
				}

				p {
					padding-top: 10px;
				}

				.name {
					font-size: 16px;
				}

				.desc {
					color: #999;
					height: 29px;
				}

				.price {
					color: $priceColor;
					font-size: 20px;
				}
			}
		}
	}
</style>
